/*
 * @Author: 肖思汗 
 * @Date: 2025-06-25 09:26:35 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-08-06 18:25:59
 */

import { Button, Row, Space } from "@nutui/nutui-react-taro";
import { Image } from "@tarojs/components";
import { chunk, get } from "lodash";
import { autorun, toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useState } from "react";
import MyEmpty from "src/components/MyEmpty/MyEmpty";
import MyPopup from "src/components/MyPopup/MyPopup";
import MyScrollView from "src/components/MyScrollView/MyScrollView";
import utils from "src/utils/utils";
import { TemplateData } from "types/type";
import designerRender from "../Designer/designerRender";
import styles from "./templateModel.module.less";
import templateModelStore from "./templateModelStore";

interface Iprops {
    children?: ReactNode
}

// 设计模版
const TemplateModel = observer((props: Iprops) => {

    // const dom = useRef<HTMLDivElement | null>(null);

    const [show, setShow] = useState<boolean>(templateModelStore.show);
    const [groupData, setGroupData] = useState<Array<any>>([]);
    const [activeid, setActiveid] = useState<[number, number | undefined]>([0, 0]);
    const [templates, setTemplates] = useState<Array<TemplateData>>([]);

    useEffect(() => autorun(() => {
        setShow(templateModelStore.show);
        setGroupData(toJS(templateModelStore.cascaderOptions));
        setTemplates(toJS(templateModelStore.templates));
        setActiveid(templateModelStore.activeid);
    }, { delay: 30 }), []);

    return (
        <MyPopup
            title="设计模版"
            hasMark={false}
            open={templateModelStore.show}
            className={styles.templateModel}
            onClose={() => {
                templateModelStore.setShow(false);
            }}
        >
            <Space className={styles.scrollFilter}>
                {groupData.map((item) => (
                    <Button
                        key={item.id}
                        fill={get(templateModelStore.activeid, [0]) === item.value ? undefined : "none"}
                        type={get(templateModelStore.activeid, [0]) === item.value ? "primary" : undefined}
                        onClick={() => {
                            const firstItemValue = get(item, ["children", 0, "value"]);
                            templateModelStore.setActiveid([item.value, firstItemValue]);
                        }}
                    >
                        {item.label}
                    </Button>
                ))}
            </Space>

            <Space className={styles.scrollFilter}>
                {groupData.find((item) => item.value === get(activeid, [0]))?.children.map((item) => (
                    <Button
                        key={item.id}
                        fill={get(activeid, [1]) === item.value ? undefined : "none"}
                        type={get(activeid, [1]) === item.value ? "primary" : undefined}
                        onClick={() => {
                            templateModelStore.setActiveid([activeid[0], item.value]);
                        }}
                    >
                        {item.label}
                    </Button>
                ))}
            </Space>

            {
                templates.length === 0 &&
                <MyEmpty
                    description="暂无模版"
                    style={{
                        height: "420rpx"
                    }}
                />
            }

            {/* 模版列表 */}
            {
                templates.length > 0 &&
                <MyScrollView
                    className={styles.templatesList}
                    onScrollBottom={() => {
                        templateModelStore.getNextPage();
                    }}
                >
                    {
                        chunk(templates, 4).map((templateArr: Array<TemplateData>, i) => {
                            return (
                                <Row key={i} className={styles.templatesRow} >
                                    {
                                        templateArr.map((template, ii) => {
                                            return (
                                                <Image
                                                    className={styles.templateImg}
                                                    src={utils.ossSuffix(template.imageUrl, 200)}
                                                    onClick={() => {
                                                        designerRender.loadTemplate(template.designData);
                                                        templateModelStore.setShow(false);
                                                    }}
                                                />
                                            );
                                        })
                                    }
                                </Row>
                            )
                        })
                    }
                </MyScrollView>
            }

        </MyPopup>
    );
});

export default TemplateModel;